<!--
 * @Author: guandeshen 295570679@qq.com
 * @Date: 2024-08-20 21:20:43
 * @LastEditors: guandeshen 295570679@qq.com
 * @LastEditTime: 2024-09-01 14:47:34
 * @FilePath: /task-admin/src/views/assets-list/components/SupplierManagement/index.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by RSC, All Rights Reserved. 
-->
<template>
  <div class="container">
    <page-content
      ref="contentRef"
      :stripe="true"
      :showPagination="false"
      :content-config="contentConfig"
      :pageSize="1000000"
      :edit-row-id="rowId"
      @edit-click="handleEditClick"
      @delete-click="handleDeleteClick"
      @add-click="handleAddClick"
    >
      <template #s_name="scope">
        <span v-if="rowId !== scope.row.id">{{ scope.row.s_name }}</span>
        <el-input
          v-else
          v-model="scope.row.s_name"
          :placeholder="$t('common.pleaseEnter')"
        />
      </template>
      <template #s_manager="scope">
        <span v-if="rowId !== scope.row.id">{{ scope.row.s_manager }}</span>
        <el-input
          v-else
          v-model="scope.row.s_manager"
          :placeholder="$t('common.pleaseEnter')"
        />
      </template>
      <template #s_contact="scope">
        <span v-if="rowId !== scope.row.id">{{ scope.row.s_contact }}</span>
        <el-input
          v-else
          v-model="scope.row.s_contact"
          :placeholder="$t('common.pleaseEnter')"
        />
      </template>
    </page-content>
  </div>
</template>

<script lang="ts" setup>
import contentConfig from "./config/content";
import type { IObject } from "@/hooks/usePage";
import type PageContent from "@/components/PageContent/index.vue";
import SupplierAPI from "@/api/supplier";
const { t } = useI18n();
const curRow = ref<IObject>();
const rowId = ref("");
const contentRef = ref<InstanceType<typeof PageContent>>();
const handleSaveClick = (row: IObject) => {
  const params = { ...row };
  const { id, ...param } = params;
  SupplierAPI.add(id == "-1" ? param : params).then(() => {
    rowId.value = "";
    curRow.value = {};
    if (id == "-1") {
      contentRef.value?.fetchPageData({}, true); //重置查询
    }
    ElMessage.success(
      id == "-1"
        ? t("common.newSuccessfullyAdded")
        : t("common.modifiedSuccessfully")
    );
  });
  // 执行保存操作
};
const handleDeleteClick = (id: string) => {
  rowId.value = "";
  curRow.value = {};
};
const handleEditClick = (row: IObject) => {
  if (rowId.value == row.id) {
    // 执行保存操作
    handleSaveClick(row);
    return;
  }
  if (rowId.value) {
    ElMessage.error(t("common.pleaseSaveTheModificationsFirst"));
    return;
  }
  curRow.value = row;
  rowId.value = row.id;
};

const addRow = ref<IObject>({
  id: "-1",
  s_name: "",
  s_address: "",
  s_postalcode: "",
  start_d: "",
  end_d: "",
  status: 1,
});
const handleAddClick = () => {
  if (rowId.value) {
    ElMessage.error(t("common.pleaseSaveTheModificationsFirst"));
    return;
  }
  rowId.value = "-1";
  contentRef.value?.pageData.push(addRow.value);
};
</script>

<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
</style>
